<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        ul li {
            width: 500px;
            height: 150px;
            border-bottom: 1px solid;

        }

        div {
            display: inline-block;
        }

        .movie {
            height: 150px;
            width: 100px;
        }

        .movie img {
            width: 100%;
            height: 100%;

        }

        .text {
            height: 150px;
            width: 220px;
            margin-top: 10px;
            margin-left: 5px;
            vertical-align: top;
        }

        .text h3 {
            width: 100px;
            display: inline-block;
        }

        .text ul>li {
            height: 20px;
            border-bottom: none;
            margin-top: 10px;
            color: #8f8f8f;
        }

        .text ul>li>span {
            font-size: 18px;
            color: #e2d27c;
        }

        .shop {
            height: 150px;
            width: 150px;
            line-height: 150px;
            vertical-align: top;
        }

        .shop a {
            display: inline-block;
            margin-left: 20px;
            width: 70px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            border: 1px solid red;
            border-radius: 25px;
            background-color: red;
            color: #fff;
            font-size: 12px;
        }

        .box {
            width: 90px;
            border: 1px solid #83ceed;
            border-radius: 5px;
        }

        .box .left {
            width: 30px;
            background-color: #83ceed;
            text-align: center;
            color: #fff;
        }

        .box .right {
            width: 55px;
            text-align: center;
            color: #83ceed;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="movie">
                <img src="https://p0.pipi.cn/mmdb/fb73868d9ab923338f300ba4e3ad51eb64f40.jpg?imageView2/1/w/464/h/644"
                    alt="">
            </div>
            <div class="text">
                <h3>流浪地球2</h3>
                <div class="box">
                    <div class="left">
                        3D
                    </div>
                    <div class="right">
                        IMAX
                    </div>
                </div>
                <ul>
                    <li>观众评 <span>9.3</span> </li>
                    <li>主演:吴京,刘德华,李雪健...</li>
                    <li>今天225家影院放映3140场</li>
                </ul>
            </div>
            <div class="shop">
                <a href="#">购票</a>
            </div>
        </li>
        <li>
            <div class="movie">
                <img src="https://p0.pipi.cn/mmdb/fb73869a9ab2ffb12de7aaa8cad7f0086cd8e.jpg?imageView2/1/w/464/h/644"
                    alt="">
            </div>
            <div class="text">
                <h3>忠犬八公</h3>
                <div class="box">
                    <div class="left">
                        3D
                    </div>
                    <div class="right">
                        IMAX
                    </div>
                </div>
                <ul>
                    <li>观众评 <span>9.4</span> </li>
                    <li>主演:大黄,冯小刚,陈冲...</li>
                    <li>今天335家影院放映4940场</li>
                </ul>
            </div>
            <div class="shop">
                <a href="#">购票</a>
            </div>
        </li>
        <li>
            <div class="movie">
                <img src="https://p0.pipi.cn/mmdb/fb73869a8d351b9235c696527d9635b82f312.jpg?imageView2/1/w/160/h/220"
                    alt="">
            </div>
            <div class="text">
                <h3>扫毒</h3>
                <div class="box">
                    <div class="left">
                        3D
                    </div>
                    <div class="right">
                        IMAX
                    </div>
                </div>
                <ul>
                    <li>观众评 <span>9.5</span> </li>
                    <li>主演:古天乐,郭富城,刘青云...</li>
                    <li>今天445家影院放映6940场</li>
                </ul>
            </div>
            <div class="shop">
                <a href="#">购票</a>
            </div>
        </li>
    </ul>
</body>

</html>